<template>
  <p>father</p>
  <child :test="name" @childBtnClick="handleChildBtnClick">
    <div>slot</div>
  </child>
</template>

<script>

import { reactive, toRef } from 'vue'
import child from './7.setup.child.vue'
export default {
  name: 'App',
  components: {
    child
  },
  setup (props, context) {

    const data = reactive({
      name: 'liuxin'
    })

    const name = toRef(data, 'name')

    setTimeout(() => {
      name.value = 'hello'
    }, 2000);

    const handleChildBtnClick = (params) => {
      alert(`子组件点击了, 父组件响应了, 参数是 params`)
    } 

    return {
      name,
      handleChildBtnClick
    }
  }
}
</script>

<style>

</style>
